<template>
	<view style="z-index: 0;">
		<view v-if="amd" class="bg-white padding-xs relative">
			<view 
				:style="{top:CustomBar + 39 + 'px'}"
				style="height: 100rpx; z-index: 9;" class="bg-white flex justify-between align-center text-lg padding-xs fixed left0 w-100">
				<text>
					<text @tap="toQcode" class="padding-xs radius text-sm bg-main">扫码开门</text>
					<text v-if="amd.flg" class="text-main">(开店中)</text>
					<text v-else class="text-red">(闭店中)</text>
				</text>
				<text class="text-sm">
					<text @tap="saveMd" class="bg-blue padding-xs radius shadow margin-left-xs">
						<text class="">保存</text>
					</text>
					<text v-if="amd.flg" @tap="close" class="bg-red padding-xs radius shadow margin-left-xs">
						<text class="">闭店</text>
					</text>
					<text v-else @tap="open" class="bg-main padding-xs radius shadow margin-left-xs">
						<text class="">开店</text>
					</text>
				</text>
			</view>
			
			<view style="padding-top: 100rpx;" class="bg-white">
				<view class="cu-form-group  bg-g-main radius">
					<view class="title text-main">门店名：</view>
					<view class="w-75">
						<input class="bg-white radius text-right " placeholder="请输入门店名" v-model="amd.mdmc"></input>
					</view>
				</view>
				<view></view>
				<view class="cu-form-group bg-g-main margin-top-xs radius ">
					<view class="title text-main">位置：</view>
					<view @click="sp = true;" class="bg-white padding-xs radius w-75 text-right">
						<text >
							<text class="" v-if="amd.pcode">{{cmap[amd.pcode].criname}}</text>
							<text class="" v-if="amd.scode">{{cmap[amd.scode].criname}}</text>
							<text class="" v-if="amd.qcode">{{cmap[amd.qcode].criname}}</text>
							<text v-else>请选择地址</text>
							<!-- <text class="cuIcon-right"></text> -->
				
						</text>
					</view>
				</view>
				<view class="cu-form-group align-start bg-g-main margin-top-xs radius ">
					<view class="title text-main">地址：</view>
					<view style="margin: 18rpx 0rpx;" class="bg-white radius w-75 ">
						<textarea v-model="amd.address" style="margin: 0; padding: 10rpx;" placeholder="请输入详细地址"></textarea>
					</view>
				</view>
				
				<!-- 上传封面-->
				<view class=" margin-top-xs radius shadow bg-g-main">
					<view class="cu-form-group">
						<view class="title text-main">封面：</view>
					</view>
					<cover-update class="" v-if="amd.mdid != null" v-model="amd.cover" :idKey="amd.mdid" />
				</view>
				<!-- 上传图片相册 -->
				<view class="margin-top-sm radius shadow bg-g-main ">
					<img-update v-if="amd.mdid != null" :idKey="amd.mdid" class="margin-top" v-model="amd.imgs"
						:size="4" />
				</view>
			</view>

		</view>
		
		
		<view class="bg-white padding-xs">
			<view class="shadow radius overflow-hidden">
				<view class="flex justify-between  bg-g-main text-main padding-xs align-center">
					<text>门禁信息</text>
					<view class="text-xxl">
						<text @tap="addmj" class="cuIcon-roundaddfill"></text>
					</view>
				</view>
				<view class="bg-g-main">
					<view class="padding-xs" v-for="(mj,index) in mjs" :key="index">
						<view class="cu-card bg-white shadow radius">
							<view class="cu-form-group">
								<view class="title">序列号：</view>
								<input class="solid" type="number" placeholder="请输入序列号" v-model="mj.sn"></input>
							</view>
							<view class="cu-form-group flex justify-between align-center">
								<view class="flex justify-end align-center">
									<view  @tap="mjs[index].flg = !mjs[index].flg;" class="flex align-stretch justify-start">
										<text class="text-xl"><text
												:class="!mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"
												class="text-main"></text></text>
										<text>进门</text>
									</view>
						
									<view @tap="mjs[index].flg = !mjs[index].flg;" class="flex justify-start align-stretch margin-left">
										<text class="text-xl"><text :class="mj.flg ? 'cuIcon-squarecheckfill' : 'cuIcon-square'" 
											class="text-main"></text></text>
										<text>出门</text>
									</view>
								</view>
								<text @tap="rmmj(index)" class="text-sm bg-orange padding-xs radius">删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 新增房间 -->
		<view class="bg-white padding-xs">
			<view class="shadow radius overflow-hidden">
				<view class="flex justify-between align-center padding-xs bg-g-main text-main">
					<text>房间信息</text>
					<view class="text-xxl ">
						<text @tap="toNewRoom" class="cuIcon-roundaddfill"></text>
						<fj v-if="newfjflg" @close="fjEditClose" :fj="newfj"></fj>
					</view>
				</view>
						
				<!-- 列表卡片区 -->
				<view class="padding-sm bg-g-main" v-for="(fj,index) in fjs" :key="index">
					<view class="bg-white shadow radius padding-xxs flex justify-between">
						<view class="w-25">
							<view class="relative w-100 radius overflow-hidden">
								<view class="img-cover relative">
								</view>
								<view class="absolute top0 w-100 h-100">
									<image class="w-100 h-100" mode="aspectFill" :src="fj.cover"></image>
								</view>
							</view>
							<view>
								
							</view>
						</view>
						<view class="w-75">
							<view class="padding-xs">
								<text>{{fj.fjmc}}</text>
							</view>
							<view class="padding-xs flex justify-between align-center">
								<text>{{fj.mj}}㎡</text>
								<uni-rate size="14"  :value="fj.rate"></uni-rate>
							</view>
							<view class="padding-xs flex justify-between align-center">
								<view>{{tp[fj.tp]}}</view>
								<view>{{func[fj.func]}}</view>
							</view>
							<view class="padding-xs flex justify-end align-center text-sm">
								<text @tap="deleteFj(index)" class="bg-orange padding-xs radius">删除</text>
								<text @tap="fjpadd(fj, index)" class="bg-blue padding-xs radius margin-left-xs">权限</text>
								<text @tap="editFjOpen(fj, index)" class="bg-main padding-xs radius margin-left-xs">编辑</text>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<md-position v-if="sp" @change="adChange" @close="sp = false" :astore="amd" />
		
	</view>
</template>

<script>
	import mdposition from "@/components/md-position.vue";
	import fjedit from "./fj/edit.vue";
	export default {
		components: {
			"md-position": mdposition,
			"fj": fjedit
		},
		data: function() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				adz: this.store.state.dz,
				amd: {},
				mjs: [],
				fjs: [],
				func: {},
				tp: {},
				sp: false,
				cmap: {},
				newfj: undefined,
				newfjflg: false,
			};
		},
		created: function() {
			this.func = this.constant.roomfunc.ROOMFUNC;
			this.tp = this.constant.roomtp.ROOMTP;
			this.cmap = this.location.localmap.cmap;
			this.init();
		},
		methods: {
			toQcode: function() {
				uni.navigateTo({
					url: "/pages/qcode?code="+this.store.state.dz.dzid
				});
			},
			init: function() {
				this.api("/dz/md/init").send({
					dzid: this.adz.dzid
				}).then(data => {
					this.amd = data.amd;
					this.fjs = data.fjs;
					this.mjs = data.mjs;
				});
			},
			adChange: function(md) {
				this.amd.pcode = md.pcode;
				this.amd.scode = md.scode;
				this.amd.qcode = md.qcode;
				this.amd.address = md.address;
				this.amd.jd = md.jd;
				this.amd.wd = md.wd;
				this.sp = false;
			},
			addmj: function() {
				this.mjs.push({
					mjid: "",
					sn: "",
					flg: false,
					fjid: this.common.generateID("FJ"),
					statu: true,
					dflg: false,
					mdid: this.amd.mdid,
				});
			},
			rmmj: function(index) {
				this.mjs.splice(index, 1);
			},
			saveMd: function() {
				
				if (!this.amd.mdmc) {
					this.message.info("门店名称必须填写");
					return;
				}
				
				if (!this.amd.pcode) {
					this.message.info("门店位置必须选择");
					return;
				}
				
				if (!this.amd.address) {
					this.message.info("门店地址必须填写");
					return;
				}
				
				if (this.fjs.length == 0) {
					this.message.info("房间必须创建");
					return;
				}
				
				this.api("/md/info/put").send({
					md: this.amd,
					fjs: this.fjs,
					mjs: this.mjs
				}).then(data => {
					this.amd = data.md;
					this.fjs = data.fjs;
					this.mjs = data.mjs;
					this.message.info("修改成功");
				});
			},
			toNewRoom: function() {
				this.newfjflg = true;
				this.newfj = {
					fjid: "",
					fjmc: "",
					imgs: [],
					mj: 0,
					cover: "",
					mdid: this.amd.mdid,
					rate: 0,
					tp: "",
					func: "",
					dj: 0,
					flg: false,
				};
			},
			fjEditClose: function(fj) {
				if (fj) {
					if (fj.fjid) {
						this.fjs[fj.index] = fj;
					} else {
						this.fjs.push(fj);
					}
				}
				this.newfjflg = false;
				this.$forceUpdate();
			},
			editFjOpen: function(fj, index) {
				this.fjs[index].index = index;
				this.newfj = fj;
				this.newfjflg = true;
				this.$forceUpdate();
			},
			deleteFj: function(index) {
				this.fjs = this.fjs.splice(index, 1);
				this.$forceUpdate();
			},
			open: function() {
				this.api("/md/open").send({
					mdid: this.amd.mdid
				}).then(data => {
					this.amd.flg = true;
					this.message.info("开店成功");
				});
			},
			
			close: function() {
				this.api("/md/close").send({
					mdid: this.amd.mdid
				}).then(data => {
					this.amd.flg = false;
					this.message.info("闭店成功");
				});
			},
			fjpadd: function(fj, index) {
				uni.navigateTo({
					url: "/pages/cdz/fj/addp?fjid="+fj.fjid+"&mdid="+fj.mdid
				});
			}
		}
	}
</script>

<style>
</style>